<template>
  <div class="newmusic">
    <!-- 分类 -->
    <div class="category">
      <div class="left">
        <span
          :style="[{ color: musicType == item.type ? themeColor : '' }]"
          :class="{ active: musicType == item.type }"
          class="type-item"
          v-for="(item, index) of category"
          :key="index"
          @click="onClickcategory(item.type, item.album)"
          >{{ item.name }}</span
        >
      </div>
      <!-- 右边按钮 -->
      <div class="right">
        <el-button
          class="btn"
          type="primary"
          round
          size="small"
          icon="el-icon-video-play"
          @click="allplaylist"
          >播放全部</el-button
        >
        <el-button round size="small" icon="el-icon-folder-add"
          >收藏全部</el-button
        >
      </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="table-box">
      <el-table
        :data="playlists"
        :show-header="false"
        stripe
        style="width: 100%"
        @row-dblclick="playmusic"
      >
        <el-table-column prop="index" label="序号" width="40">
          <template slot-scope="scope">
            <span
              style="color: #aeaeae"
              @click="uploadMusic(scope.row.mp3Url)"
              >{{ scope.$index + 1 }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="img"
          class-name="image"
          width="90px"
          align="center"
          label="图片"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.pic"
              width="3.75rem"
              height="3.75rem"
              alt=""
              class="image"
            />
            <i
              class="iconfont icon-bofang"
              title="播放音乐"
              :style="{ color: themeColor }"
              @click="playmusic(scope.row)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="title" class-name="title" label="标题">
          <template slot-scope="scope">
            <div class="title-box" :title="scope.row.alia">
              <span>{{ scope.row.name }}</span>
              <span>{{ scope.row.alia }}</span>
              <span
                v-if="scope.row.mv !== 0"
                class="iconfont icon-shipin1"
                title="播放MV"
                style="vertical-align: middle; padding-left: 0.3125rem"
                :style="{ color: themeColor }"
                @click="toMvDetails(scope.row.mv)"
              ></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          class-name="singername"
          width="200px"
          label="歌手"
        >
          <template slot-scope="scope">
            <div class="singer-name">
              <span
                :title="scope.row.artists"
                @click="toSingerDetails(scope.row.aliasId)"
                >{{ scope.row.song }}</span
              >
              {{ scope.row.song2 !== "" ? " / " : "" }}
              <span
                :title="scope.row.song2"
                v-if="scope.row.song2 !== ''"
                @click="toSingerDetails(scope.row.aliasId2)"
                >{{ scope.row.song2 }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" class-name="album" label="专辑">
          <template slot-scope="scope">
            <span
              :title="scope.row.album"
              @click="toAlbumDetails(scope.row.albumId)"
              >{{ scope.row.album }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="address" label="时间" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { geToptMusic } from "@/api/music.js";
// import FileSaver from "@/utils/fileserve.js";
// import JSZip from "jszip";
// import FileSaver  from 'file-saver';
// import { rankSongDetail } from "@/utils/detail.js";
export default {
  name: "newmusic",
  components: {},
  props: {},
  data() {
    return {
      // themecolor: localStorage.getItem("themeColor"), // 颜色
      category: [
        { name: "全部", type: 0, album: "ALL" },
        { name: "华宇", type: 7, album: "ZH" },
        { name: "欧美", type: 96, album: "EA" },
        { name: "日本", type: 8, album: "KR" },
        { name: "韩国", type: 16, album: "JP" }
      ],
      musicType: 0, // 新歌速递类别
      playlist: [],
      playlists: []
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    $route() {
      this.geToptMusic();
    }
  },
  created() {
    this.musicType =
      this.$route.query.type !== undefined ? this.$route.query.type : 0;
    this.geToptMusic();
  },
  mounted() {},
  methods: {
    uploadMusic() {
      // FileSaver.saveAs(
      //   "http://m7.music.126.net/20201127151935/10ae0950db3dfbce331fb951d735aea8/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3527112747/1eb1/ceef/6b6c/0aaee97e5b16874b17fb2e56c259bf0e.mp3",
      //   "yinyue"
      // );
    },
    //点击切换分类
    onClickcategory(type) {
      this.musicType = type;
      this.$router.push({
        name: "musicCourier",
        query: {
          type: type
        }
      });
    }, // 获取新歌速递
    async geToptMusic() {
      this.showLoading();
      const { data } = await geToptMusic({
        type: this.$route.query.type | this.musicType
      });
      if (data.code == 200) {
        // loading.close();
        this.closeLoading();
      }
      this.playlist = data.data;
      data.data.forEach(val => {
        let obj = {
          id: val.id,
          name: val.name,
          album: val.album.name,
          song: val.artists[0].name,
          song2: val.artists.lenght >= 2 ? val.artists[1].name : "",
          song3: val.artists.lenght >= 3 ? val.artists[2].name : "",
          song4: val.artists.lenght >= 4 ? val.artists[3].name : "",
          aliasId: val.artists[0].id,
          aliasId2: val.artists.lenght >= 2 ? val.artists[1].id : "",
          aliasId3: val.artists.lenght >= 3 ? val.artists[2].id : "",
          aliasId4: val.artists.lenght >= 4 ? val.artists[3].id : "",
          pic: val.album.blurPicUrl,
          mv: val.mvid,
          alia: val.alias.length !== 0 ? `${val.alias[0]}` : "",
          albumId: val.album.id,
          time: dayjs(val.bMusic.playTime).format("mm:ss")
        };
        this.playlists.push(obj);
      });
    },
    playmusic(row) {
      this.$store.commit("setplaylist", this.playlists);
      this.$store.commit("setContent", row);
    },
    allplaylist() {
      this.$store.commit("setplaylist", this.playlists);
      this.$store.commit("setContent", this.playlists[0]);
    },
    // 跳转歌手详情
    toSingerDetails(id) {
      this.$router.push({
        name: "singerdetails",
        query: {
          id: String(id)
        }
      });
    }, // 跳转到专辑详情
    toAlbumDetails(id) {
      this.$router.push({
        name: "albumdetails",
        query: {
          id: String(id)
        }
      });
    },
    toMvDetails(id) {
      this.$router.push({
        name: "mvdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.category {
  width: 100%;
  height: 1.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    .type-item {
      display: inline-block;
      //   width: 3.75rem;
      //   height: 1.875rem;
      //   text-align: center;
      //   line-height: 1.875rem;
      padding: 0.125rem 0.625rem;
      cursor: pointer;
      margin-right: 1.5625rem;
    }
  }
  .active {
    font-size: 0.875rem;
    border-radius: 1.25rem;
    background: rgba($color: #bbbbbb, $alpha: 0.1);
    //   background: rgba($color: #000000, $alpha: 1.0);
  }
}
.table-box {
  margin-top: 1.25rem;
  /deep/ .el-table {
    .el-table__body-wrapper {
      .el-table__row {
        /deep/.image {
          // width: 5.625rem;
          .cell {
            // position: relative;
            // width: 5.625rem;
            .image {
              position: relative;
              width: 4.375rem;
              height: 4.375rem;
              border-radius: 0.3125rem;
              cursor: pointer;
            }

            .icon-bofang {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 1.5rem;
              cursor: pointer;
            }
          }
        }
        .title {
          .title-box {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            span {
              cursor: default;

              &:nth-child(2) {
                color: #ccc;
                font-size: 0.75rem;
              }
            }
            .icon-shipin1 {
              cursor: pointer;
            }
          }
        }
        .album {
          span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            cursor: pointer;
            &:nth-child(1):hover {
              color: #000;
            }
          }
        }
        .singername {
          .singer-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            span {
              cursor: pointer;
              &:nth-child(1):hover {
                color: #000;
              }
              &:nth-child(2):hover {
                color: #000;
              }
            }
          }
        }
      }
    }
  }
}
</style>
